<template>
     <div class="catalogmanage">
        <div class="catalog">
           <DirManagementTwo></DirManagementTwo>
        </div>
        <div v-show="exchange" id="map" >
          <el-image
            style="width: 100%; height: 100%"
            :src="url"
            fit="fill"></el-image>

          <div id="nine">
            <el-button type="text" @click="statistical('第九师')" >第九师</el-button>
          </div>
          <div id="ten">
            <el-button type="text" @click="statistical('第十师')">第十师</el-button>
          </div>
          <div id="five">
            <el-button type="text" @click="statistical('第五师')">第五师</el-button>
          </div>
          <div id="four">
            <el-button type="text" @click="statistical('第四师')">第四师</el-button>
          </div>
          <div id="three">
            <el-button type="text" @click="statistical('第三师')">第三师</el-button>
          </div>
          <div id="ten_four">
            <el-button type="text" @click="statistical('第十四师')">第十四师</el-button>
          </div>
          <div id="one">
            <el-button type="text" @click="statistical('第一师')">第一师</el-button>
          </div>
          <div id="two">
            <el-button type="text" @click="statistical('第二师')">第二师</el-button>
          </div>
          <div id="seven">
            <el-button type="text" @click="statistical('第七师')">第七师</el-button>
          </div>
          <div id="eight">
            <el-button type="text" @click="statistical('第八师')">第八师</el-button>
          </div>
          <div id="six">
            <el-button type="text" @click="statistical('第六师')">第六师</el-button>
          </div>
          <div id="ten_two">
            <el-button type="text" @click="statistical('第十二师')">第十二师</el-button>
          </div>
          <div id="ten_three">
            <el-button type="text" @click="statistical('第十三师')">第十三师</el-button>
          </div>
          <div id="ten_one">
            <el-button type="text" @click="statistical('第十一师')">第十一师</el-button>
          </div>
          <div id="pie" v-show="showor" >

          </div>
          <div class="title">
            <p>兵团各师统计图表</p>
          </div>
        </div>
        <div v-show="!exchange" id="cartograMap">
<!--          <div class="title">-->
<!--            <p>全兵团统计图表</p>-->
<!--          </div>-->
          <div  id="pieMap">
          </div>
        </div>
        <div id="exchange1">
           <el-button size="medium" @click="exchangeMap">{{this.exchangeName}}</el-button>
        </div>
     </div>
</template>

<script>

    import DirManagementTwo from "../DirManagementTwo";
    import {createNamespacedHelpers} from 'vuex'
    import echarts from 'echarts'
    const {mapGetters} = createNamespacedHelpers('dirmanage')
    import close     from  '@/assets/img/close11.png'
    import download  from  '@/assets/img/download.png'
    import exchange  from  '@/assets/img/exchange.png'
    import staticPng from  '@/assets/img/static.png'
    export default {
        name: "CatalogManage",
        components:{
          DirManagementTwo
       },
        data(){
            return{
                 keyword:'',
                 url:staticPng,
                 piemap:false,
                 showor:false,
                 exchange:true,
                 exchangeName:'切换到全兵团',
                 allShiData:[
                   '第一师','第二师','第三师','第四师',
                   '第五师','第六师','第七师','第八师',
                   '第九师','第十师','第十一师','第十二师',
                   '第十三师','第十四师'
                 ]
            }
        },
      created() {
         this.statistical('第三师')
      },
      methods:{
        exchangeMap(){
          this.exchange = ! this.exchange
          if (this.exchange){
            this.exchangeName = '切换到全兵团'
            this.statistical('第三师')
          }
          else{
            this.exchangeName = '切换到各师'
            this.statisticalAll()

          }
        },

         async  statistical(val){
               // console.log(this.figureArea)
               // console.log(this.figureLine)
               this.showor = true
               await  this.$store.dispatch('dirmanage/getDataCiAiTo',{'keyword':val})
               // console.log(this.catalogLists)
               var myChart = echarts.init(document.getElementById('pie'))
               myChart.clear()
               var  option = {
                 toolbox:{
                   feature:{
                     saveAsImage:{
                       type:'png',
                       icon: 'image://' + download
                     },
                     myTool:{ //自定义方法 配置   我这是为了实现 饼图切换为柱状图
                       show : true,
                       title : '切换到各团',
                       icon :  'image://' + exchange,
                       onclick:()=>{
                         myChart.clear();
                         myChart.setOption(option2)
                       }
                     },

                     myTool2:{ //自定义方法 配置   我这是为了实现 饼图切换为柱状图
                       show : true,
                       title : '关闭',
                       icon :  'image://' + close,
                       onclick:()=>{
                         myChart.clear();
                         this.showor = false
                       }
                     }
                   }
                 },
                 tooltip: {
                   trigger: "axis",
                   axisPointer: {
                     type: "shadow",
                   }
                 },
                   title: {
                     text: val + '图斑数量柱状图',

                     left: "10",
                     top: "10",
                     textStyle: {
                       fontSize: 12
                     },

                   },
                   xAxis: {
                     type: 'category',
                     data: ['生态保\n护红线', '环境质\n量底线', '资源利\n用上线', '环境保\n护单元'],
                     // axisTick: {
                     //   alignWithLabel: true
                     // },
                     textStyle: {
                       fontSize: 12,
                       color:"#fff"
                     },
                   },
                   yAxis: {
                     type: 'value'
                   },
                   series: [{
                     data: this.figureNumberList,
                     type: 'bar',
                     barWidth : 10
                   }]
                 };
               var  option2 = {
                 toolbox:{
                   feature:{
                     saveAsImage:{
                       type:'png',
                       icon: 'image://' + download
                     },
                     myTool:{ //自定义方法 配置   我这是为了实现 饼图切换为柱状图
                       show : true,
                       title : '切换到全师',
                       icon :  'image://' + exchange,
                       onclick:()=>{
                         myChart.clear();
                         myChart.setOption(option)
                       }
                     },
                     myTool2:{ //自定义方法 配置   我这是为了实现 饼图切换为柱状图
                       show : true,
                       title : '关闭',
                       icon :  'image://' + close,
                       onclick:()=>{
                         myChart.clear();
                         this.showor = false
                       }
                     }

                   }
                 },
                 title: {
                   text: val + '各团图斑数量柱状图',
                   left: "10",
                   top: "10",
                   textStyle: {
                     fontSize: 12
                   },

                 },
                   tooltip: {
                     trigger: 'axis',
                     axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                       type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                     }
                   },
                   legend: {
                     data:['生态保护红线', '环境质量底线', '资源利用上线', '环境保护单元'],
                     top:'60',
                     textStyle: {
                       // fontStyle: "italic",
                       // fontSize: 10
                     }
                   },
                   grid: {
                     left: '3%',
                     right: '4%',
                     bottom: '3%',
                     containLabel: true
                   },
                   xAxis: [
                     {
                       type: 'category',
                       data: this.groupDatas
                     }
                   ],
                   yAxis: [
                     {
                       type: 'value'
                     }
                   ],
                   series: [
                     {
                       name: '生态保护红线',
                       type: 'bar',
                       data: this.groupAtomsDatas
                     },
                     {
                       name: '环境质量底线',
                       type: 'bar',
                       data: this.groupHjzldxDatas
                     },
                     {
                       name: '资源利用上线',
                       type: 'bar',
                       data: this.groupZylysxDatas
                     },
                     {
                       name: '环境保护单元',
                       type: 'bar',
                       data: this.groupHjgkdyDatas
                     },
                   ]
                 };
               myChart.setOption(option)
         },
         async  statisticalAll(){
             await  this.$store.dispatch('dirmanage/getDataCiAiTo',{'keyword':this.allShiData})
             var myChart = echarts.init(document.getElementById('pieMap'))
             myChart.clear()
             var option3 = {
               toolbox:{
                 feature:{
                   saveAsImage:{
                     type:'png',
                     icon: 'image://' + download
                   },
                 }
               },
               tooltip: {
                 trigger: "axis",
                 axisPointer: {
                   type: "shadow",
                   width:15
                 }
               },
               legend: {
                 data:['生态保护红线', '环境质量底线', '资源利用上线', '环境保护单元'],

                 left: "56%",
                 top: "3%",
                 textStyle: {
                   // fontStyle: "italic",
                   // fontSize: 10
                 },

               },

               grid: [
                 {x: '7%', y: '7%', width: '38%', height: '38%'},
                 {x2: '7%', y: '7%', width: '38%', height: '38%'},
                 {x: '7%', y2: '7%', width: '38%', height: '38%'},
                 {x2: '7%', y2: '7%', width: '38%', height: '38%'}
               ],
               title: [{
                 text: '全兵团图斑数量柱状图',
                 left: "18%",
                 top: "top",
                 textStyle: {
                   fontSize: 16
                 },
                 xAxisIndex: 1,
                 yAxisIndex: 1,
               },
                 {
                   text: '全兵团各师图斑数量柱状图',
                   left: "64%",
                   top: "top",
                   textStyle: {
                     fontSize: 16
                   },
                 },
                 {
                   text: '全兵团图斑面积柱状图',
                   left: "18%",
                   top: "center",
                   textStyle: {
                     fontSize: 16
                   },
                 },
                 {
                   text: '全兵团各师图斑面积柱状图',
                   left: "64%",
                   top: "center",
                   textStyle: {
                     fontSize: 16
                   },
                 },
               ],
               xAxis: [{
                 gridIndex:0,
                 type: 'category',
                 data: ['生态保护红线', '环境质量底线', '资源利用上线', '环境保护单元'],
                 // axisTick: {
                 //   alignWithLabel: true
                 // },
                 textStyle: {
                   fontSize: 12,
                   color:"#fff"
                 },
               },
                 {
                   gridIndex:1,
                   type: 'category',
                   data:  this.allShiData,
                   // axisTick: {
                   //   alignWithLabel: true
                   // },
                   textStyle: {
                     fontSize: 12,
                     color:"#fff"
                   },
                   axisLabel: {interval:0,rotate:20 },
                   axisTick: {
                     show: false
                   }

                 },
                 {
                   gridIndex:2,
                   type: 'category',
                   data: ['生态保护红线', '环境质量底线', '资源利用上线', '环境保护单元'],
                   // axisTick: {
                   //   alignWithLabel: true
                   // },
                   textStyle: {
                     fontSize: 12,
                     color:"#fff"
                   },
                 },
                 {
                   gridIndex:3,
                   type: 'category',
                   data:  this.allShiData,
                   // axisTick: {
                   //   alignWithLabel: true
                   // },
                   textStyle: {
                     fontSize: 12,
                     color:"#fff"
                   },
                   axisLabel: {interval:0,rotate:20 },
                   axisTick: {
                     show: false
                   }
                 },

               ],
               yAxis: [{
                 type: 'value',
                 gridIndex: 0
               },{
                 type: 'value',
                 gridIndex: 1
               },{
                type: 'value',
               gridIndex: 2
              },
                 {
                   type: 'value',
                   gridIndex:3
                 },
               ],
               series: [{
                 data: this.divisionsFigureNumber,
                 type: 'bar',
                 barWidth : 20,
                 xAxisIndex: 0,
                 yAxisIndex: 0,
               },
                 {
                   xAxisIndex: 1,
                   yAxisIndex: 1,
                   name: '生态保护红线',
                   type: 'bar',
                   data: this.groupAtomsDatas
                 },
                 {
                   xAxisIndex: 1,
                   yAxisIndex: 1,
                   name: '环境质量底线',
                   type: 'bar',
                   data: this.groupHjzldxDatas
                 },
                 {
                   xAxisIndex: 1,
                   yAxisIndex: 1,
                   name: '资源利用上线',
                   type: 'bar',
                   data: this.groupZylysxDatas
                 },
                 {
                   xAxisIndex:1,
                   yAxisIndex: 1,
                   name: '环境保护单元',
                   type: 'bar',
                   data: this.groupHjgkdyDatas
                 },
                 {
                   data: this.divisionsFigureArea,
                   type: 'bar',
                   barWidth : 20,
                   xAxisIndex: 2,
                   yAxisIndex: 2,
                 },
                 {
                   xAxisIndex: 3,
                   yAxisIndex: 3,
                   name: '生态保护红线',
                   type: 'bar',
                   data: this.divisionsAtomArea
                 },
                 {
                   xAxisIndex: 3,
                   yAxisIndex: 3,
                   name: '环境质量底线',
                   type: 'bar',
                   data: this.divisionsHjzldxArea
                 },
                 {
                   xAxisIndex: 3,
                   yAxisIndex: 3,
                   name: '资源利用上线',
                   type: 'bar',
                   data: this.divisionsZylysxArea
                 },
                 {
                   xAxisIndex:3,
                   yAxisIndex: 3,
                   name: '环境保护单元',
                   type: 'bar',
                   data: this.divisionsHjgkdyArea
                 },
               ]
             };
             myChart.setOption(option3)
         }
       },
       computed:{
          ...mapGetters(['catalogLists']),
          ...mapGetters(['figureNumberList']),
          ...mapGetters(['figureArea']),
          ...mapGetters(['figureLine']),
          ...mapGetters(['groupDatas']),
          ...mapGetters(['groupAtomsDatas']),
          ...mapGetters(['groupHjzldxDatas']),
          ...mapGetters(['groupZylysxDatas']),
          ...mapGetters(['groupHjgkdyDatas']),

          ...mapGetters(['divisionsFigureNumber']),
          ...mapGetters(['divisionsFigureArea']),
          ...mapGetters(['divisionsFigureLine']),

         ...mapGetters(['divisionsAtomArea']),
         ...mapGetters(['divisionsHjzldxArea']),
         ...mapGetters(['divisionsZylysxArea']),
         ...mapGetters(['divisionsHjgkdyArea']),

       },
       mounted() {
         this.$store.dispatch('dirmanage/getCatlogData')
         // var extent = [0, 0, 1024, 968];
         // var projection = new Projection({
         //   code: 'xkcd-image',
         //   units: 'pixels',
         //   extent: extent,
         // });
         // var map = new Map({
         //   controls:olCdefaults({ attribution: false, zoom: false, rotate: false }).extend([
         //   ]),
         //   layers: [
         //     new ImageLayer({
         //       source: new Static({
         //         url: 'http://localhost:8040/static.png',
         //         projection: projection,
         //         imageExtent: extent,
         //       }),
         //     })],
         //   target: 'map',
         //   view: new View({
         //     projection: projection,
         //     center: getCenter(extent),
         //     zoom: 2,
         //     // maxZoom: 8,
         //   }),
         //   interactions: defaults({
         //     doubleClickZoom: false,// 取消双击放大功能交互
         //     mouseWheelZoom: false, // 取消滚动鼠标中间的滑轮交互
         //     shiftDragZoom: false, // 取消shift+wheel左键拖动交互
         //     dragPan:false
         //   })
         //
         // });
       }
    }
</script>

<style scoped>
  /deep/ #map >.el-button{
    padding: 0;
  }
  p{
    margin: 0;
  }
  .catalogmanage{
    position: absolute;
    left: 15.5%;
    /*height: 87%;*/
    top: 9.5%;
    bottom: 1.5%;
    width: 84.5%;
    /*background-color: #ffffff;*/
    border-radius: 8px;

  }
 .catalog{
   position: absolute;
   width: 25%;
   /*top:1%;*/
   /*bottom: 1%;*/
   height: 100%;
   overflow: auto;
   border-radius: 8px;
   background-color: #ffffff;
   box-shadow: 0 0 5px #acc4fe;
 }
  #map{
    position: absolute;
    left: 25.5%;
    width: 74%;
    height: 100%;
    background-color: #3B5877;
    border-radius: 8px;
    box-shadow: 0 0 5px #acc4fe;
  }
  #cartograMap{
    position: absolute;
    left: 25.5%;
    width: 74%;
    height: 100%;
    /*background-color: #3B5877;*/
    border-radius: 8px;
    box-shadow: 0 0 5px #acc4fe;
  }
  .title{
    position: absolute;
    top:2%;
    left: 40%;
    color: #e9eef3;
    padding: 5px;
    font-size: 18px;
    background-color: #3B5877;
  }
  #ten{
    position: absolute;
    z-index: 99;
    top:8%;
    left: 57%;
    padding: 5px;
    /*background-color: #3B5877;*/
  }
  #nine{
    /*color: yellow;*/
    position: absolute;
    z-index: 99;
    top:13.5%;
    left:43%;
    padding: 5px;

    /*background-color: #3B5877;*/
  }
  #five{
    /*color: yellow;*/
    position: absolute;
    z-index: 99;
    top:26%;
    left:38%;
    padding: 5px;

    /*background-color: #3B5877;*/
  }
  #four{
    /*color: yellow;*/
    position: absolute;
    z-index: 99;
    top:33%;
    left:34%;
    padding: 5px;

    /*background-color: #3B5877;*/
  }
  #three{
    /*color: yellow;*/
    position: absolute;
    z-index: 99;
    top:63%;
    left:28%;
    padding: 5px;

    /*background-color: #3B5877;*/
  }
  #one{
       /*color: yellow;*/
       position: absolute;
       z-index: 99;
       top:58%;
       left:35%;
       padding: 5px;

       /*background-color: #3B5877;*/
  }
  #ten_four{
    /*color: yellow;*/
    position: absolute;
    z-index: 99;
    top:80%;
    left:28%;
    padding: 5px;

    /*background-color: #3B5877;*/
  }
  #two{
    /*color: yellow;*/
    position: absolute;
    z-index: 99;
    top:48%;
    left:49%;
    padding: 5px;

    /*background-color: #3B5877;*/
  }
  #seven{
    position: absolute;
    z-index: 99;
    top:30%;
    left:45%;
    padding: 5px;

  }
  #eight{
    position: absolute;
    z-index: 99;
    top:32%;
    left:51%;
    padding: 5px;

  }
  #six{
    position: absolute;
    z-index: 99;
    top:32%;
    left:56%;
    padding: 5px;

  }
  #ten_two{
    position: absolute;
    z-index: 99;
    top:37%;
    left:55.5%;
    padding: 5px;

  }
  #ten_three{
    position: absolute;
    z-index: 99;
    top:42%;
    left:74%;
    padding: 5px;
  }
  #ten_one{
    position: absolute;
    z-index: 99;
    top:35%;
    left:57.5%;
    padding: 5px;
  }
#pie{
    width: 320px;height: 280px;position: absolute;top: 60px;left: 30px;background-color: #e9eef3
}
#pieMap{
    width: 100%;height: 100%;position: absolute;top: 0;background-color: #e9eef3
}
  #exchange1{
    position: absolute;
    top:1%;
    left:27%;
    color: #e9eef3;
    padding: 5px;
    font-size: 18px;
  }


</style>
